<template>
  <div class="work-dynamics" ref="scroll-container">
    <div ref="content-container">
      <el-steps direction="vertical" :active="steps.length" >
        <el-step icon="el-icon-s-help" v-for="item in steps">
          <template #title>
            <span style="color:#29EFF8">{{item.title}}</span>
          </template>
          <template #description>
            <div class="content">
              <div class="content-item" v-for="content in item.content">
                <div class="text">{{content.text}}</div>
                <div class="value">{{content.value}}</div>
                <div class="unit">{{content.unit}}</div>
                <div class="label" :style="content.label.color||null">{{content.label.text}}</div>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>
<script>
const color={
  green:{
    color: '#52c41a',
    background: 'rgba(82,196,26,.15)',
    border: '1px solid rgba(82,196,26,.3)'
  },
  blue:{
    color: '#1890ff',
    background: 'rgba(24,144,255,.15)',
    border: '1px solid rgba(24,144,255,.3)'
  },
  orange:{
    color: '#faad14',
    background: 'rgba(250,173,20,.15)',
    border: '1px solid rgba(250,173,20,.3)'
  }
};
export default {
  name: 'WorkDynamics',
  data() {
    return {
      steps:[{
        title: '今年',
        content: [
          {
            text: '隐患排查',
            unit: '次',
            value: 32,
            label:{
              text:'已完成',
              color:color.green
            },
          },
          {
            text: '常规巡查',
            unit: '次',
            value: 175,
            label:{
              text:'已完成',
              color:color.green
            },
          },
          {
            text: '专项检查',
            unit: '次',
            value: 26,
            label:{
              text:'已完成',
              color:color.green
            },
          },
          {
            text: '突击检查',
            unit: '次',
            value: 19,
            label:{
              text:'已完成',
              color:color.green
            },
          }
        ]
      },],
      // steps: [
      //   {
      //     title: '今日',
      //     content: [
      //       {
      //         text: '巡逻检查',
      //         unit: '次',
      //         value: 15,
      //         label:{
      //           text:'已完成',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '纠纷调解',
      //         unit: '起',
      //         value: 3,
      //         label:{
      //           text:'处理中',
      //           color:color.blue
      //         },
      //       },
      //       {
      //         text: '上门服务',
      //         unit: '次',
      //         value: 8,
      //         label:{
      //           text:'已完成',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '视频巡查',
      //         unit: '小时',
      //         value: 24,
      //         label:{
      //           text:'无异常',
      //           color:color.green
      //         },
      //       }
      //     ]
      //   },{
      //     title: '本周',
      //     content: [
      //       {
      //         text: '纠纷化解',
      //         unit: '起',
      //         value: 8,
      //         label:{
      //           text:'已化解',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '安全检查',
      //         unit: '次',
      //         value: 12,
      //         label:{
      //           text:'常规巡查',
      //           color:null
      //         },
      //       },
      //       {
      //         text: '医疗服务',
      //         unit: '人次',
      //         value: 35,
      //         label:{
      //           text:'上门服务',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '校园护学',
      //         unit: '次',
      //         value: 10,
      //         label:{
      //           text:'护学岗',
      //           color:color.green
      //         },
      //       }
      //     ]
      //   },{
      //     title: '本月',
      //     content: [
      //       {
      //         text: '隐患排查',
      //         unit: '次',
      //         value: 128,
      //         label:{
      //           text:'整改中',
      //           color:color.orange
      //         },
      //       },
      //       {
      //         text: '便民服务',
      //         unit: '次',
      //         value: 45,
      //         label:{
      //           text:'满意度98%',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '安防预警',
      //         unit: '起',
      //         value: 15,
      //         label:{
      //           text:'已处置',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '支援服务',
      //         unit: '人次',
      //         value: 56,
      //         label:{
      //           text:'服务中',
      //           color:color.blue
      //         },
      //       }
      //     ]
      //   },{
      //     title: '累计',
      //     content: [
      //       {
      //         text: '巡逻检查',
      //         unit: '次',
      //         value: '1,280',
      //         label:{
      //           text:'年度累计',
      //           color:null
      //         },
      //       },
      //       {
      //         text: '矛盾纠纷',
      //         unit: '起',
      //         value: 156,
      //         label:{
      //           text:'化解率96%',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '便民服务',
      //         unit: '次',
      //         value: 520,
      //         label:{
      //           text:'满意度97%',
      //           color:color.green
      //         },
      //       },
      //       {
      //         text: '网格服务',
      //         unit: '次',
      //         value: '2,150',
      //         label:{
      //           text:'覆盖率100%',
      //           color:color.green
      //         },
      //       }
      //     ]
      //   },
      // ],
      workDynamicsTimer: null,
    }
  },
  methods: {
    startScrollTimer() {
      this.$nextTick(()=>{
        let scrollContainer = this.$refs['scroll-container']
        const contentContainer = this.$refs['content-container']
        const maxScrollTop = scrollContainer.scrollHeight - scrollContainer.offsetHeight
        this.currentScrollTop=0;
        if (contentContainer.offsetHeight - 10 > scrollContainer.offsetHeight) {
          //10px偏移，以防频闪
          this.workDynamicsTimer = setInterval(() => {
            this.currentScrollTop += 1;
            if (this.currentScrollTop > maxScrollTop) {
              this.currentScrollTop = 0;
            }
            scrollContainer.scrollTop = this.currentScrollTop;
          }, 100)
        }
      })
    }
  },
  beforeDestroy() {
    this.workDynamicsTimer && clearInterval(this.workDynamicsTimer)
  },
  mounted() {
    this.startScrollTimer()
  }
}
</script>
<style lang="scss">
.work-dynamics{
  .el-step__icon{
    background:#021326;
    color: #29EFF8;
  }
  .el-step__line{
    background: #29EFF8;
  }
  .el-step__head.is-finish{
    border-color: #29EFF8;
    color: #29EFF8;
  }
  .el-step__description{
    padding-right: 0;
  }
  .el-steps--vertical{
    height: auto;
  }
}
</style>
<style scoped lang="scss">
.work-dynamics{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  .content{
    .content-item{
      width: 100%;
      border: 1px solid #227EB7;
      border-radius: 8px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      height: 53px;
      margin: 15px 0;
      cursor: pointer;
      background: rgba(50, 180, 255, 0.1);
      .value{
        color: #fff;
        font-size: 15px;
        margin-left: 10px;
        margin-right: 5px;
      }
      .unit,.text{
        color: #fff;
        font-size: 15px;
      }
      .label{
        margin-left: 20px;
        padding: 2px 10px;
        border-radius: 20px;
        color: #29EFF8;
      }
    }
  }
}
</style>
